<template>
  <div>
    <div class="margin-little-top">
      <el-checkbox v-model="input.rangeParam.enable">开启</el-checkbox>
      <el-input-number :disabled="rangeParamDisabled" v-model="input.rangeParam.start"  class="margin-left"  style="width: 120px" size="small" :min="0" :max="this.keyObj.length"/>
      <el-input-number :disabled="rangeParamDisabled" v-model="input.rangeParam.stop" style="width: 120px" size="small" :min="0" :max="this.keyObj.length - 1"/>
      <el-button :disabled="rangeParamDisabled" class="margin-left" plain  size="small" @click="loadDataRequest">加载数据</el-button>
    </div>

    <p v-if="data" v-for="item in data">{{item}}</p>
  </div>
</template>

<script>
import redis from "@/api/redis";

export default {
  name: "list",
  props: {
    keyObj: {
      type: Object,
      required: true
    },
    connParam:{
      type: Object,
      required: true
    },
    serializerParam: {
      type: Object,
      required: true
    },
    all: {
      type: Boolean,
      default: false
    }
  },
  data(){
    return {
      input: {
        rangeParam: {
          enable: false,
          start: 0 ,
          stop: 0
        }
      },
      data: null
    }
  },
  methods: {
    getData(){
      return this.data;
    },
    loadData(){
      this.input.rangeParam.stop = this.keyObj.length - 1;
      if (this.input.rangeParam.stop > 100){
        // 不能无限制加载, 初始最多加载 100 条
        this.input.rangeParam.stop = 100;
      }
      this.loadDataRequest();
    },
    loadDataRequest(){
      redis.readData(this.connParam,this.keyObj.key,this.serializerParam,
      this.all,null,this.input.rangeParam,null).then(res => {
        this.data = res.data;
      })
    }
  },
  computed: {
    rangeParamDisabled(){
      return this.all || !this.input.rangeParam.enable;
    },
  }

}
</script>

<style scoped>

</style>
